import { useState } from 'react'
import React from 'react'
import { post } from '@/lib/request.js';
import { Button } from "@/components/ui/button";
import { useToast } from "@/components/ui/use-toast";
import { Loader2 } from "lucide-react";
import './index.css';
export default function () {
    const [inputToken, setInputToken] = useState(null);
    const [loading, setLoading] = useState(false);
    const { toast } = useToast();
    return <section className={`page`}>
        <div className="page__hd">
            <h1 className="page__title">身份验证</h1>
            <p className="page__desc">登录小钱钱后台</p>
        </div>
        <div className={`page__bd page__bd_spacing`}>
            <div className="weui-cells__title">请在群聊中询问小钱钱 “登录后台”</div>
            <div className="weui-cell">
                <div className="weui-cell__hd">
                    <div>
                        <label className="weui-label">登录凭证</label>
                    </div>
                </div>
                <div className="weui-cell__bd">
                    <div>
                        <input
                            value={inputToken}
                            onChange={e => setInputToken(e.target.value)}
                            className="weui-input"
                            placeholder="请输入凭证码"
                            defaultValue=""
                        />
                        <span className="weui-icon-checked" />
                    </div>
                </div>
            </div>
            <div style={{ margin: "1.17647em 15px 0.3em" }}>
                {
                    loading ? <Button disabled className="w-full">
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        登录
                    </Button> : <Button
                        className="w-full"
                        onClick={e => {
                            if (!inputToken) {
                                toast({
                                    title: "登录凭证不能为空",
                                    description: ""
                                })
                                return;
                            }
                            setLoading(true);
                            post('/api/login', { password: inputToken }, { noErrorMessage: true }).then(() => {
                                localStorage.setItem('Token', inputToken);
                                setTimeout(() => window.location = '/', 1500);
                            }).catch(err => {
                                toast({
                                    title: `登录失败：${err}`,
                                    description: ""
                                })
                            }).finally(() => setLoading(false))
                        }}>
                        登录
                    </Button>
                }

            </div>
            <div
                className="weui-toptips weui-toptips_info"
                style={{ display: "none" }}
            />
        </div>
    </section>
}
